<template>
  <div class="control-section component-gap">
    <h3>👁️ SpireCV 视觉系统控制</h3>
    
    <!-- 视觉控制模式 -->
    <div class="vision-module">
      <h4>🎯 视觉控制模式</h4>
      <div class="vision-controls">
        <div class="control-group">
          <label>鼠标控制:</label>
          <div class="button-group">
            <button 
              @click="sendMouseControl(0)" 
              class="btn btn-vision"
              :class="{ active: mouseControl === 0 }"
              :disabled="!isConnected"
            >
              🖱️ 左键模式
            </button>
            <button 
              @click="sendMouseControl(1)" 
              class="btn btn-vision"
              :class="{ active: mouseControl === 1 }"
              :disabled="!isConnected"
            >
              🖱️ 右键模式
            </button>
          </div>
        </div>
        
        <div class="control-group">
          <label>坐标输入:</label>
          <div class="coordinate-inputs">
            <input 
              type="number" 
              v-model.number="visionTarget.x" 
              placeholder="X坐标"
              class="control-input"
              step="0.1"
              :disabled="!isConnected"
            >
            <input 
              type="number" 
              v-model.number="visionTarget.y" 
              placeholder="Y坐标"
              class="control-input"
              step="0.1"
              :disabled="!isConnected"
            >
            <button 
              @click="sendVisionTarget" 
              class="btn btn-primary"
              :disabled="!isConnected"
            >
              🎯 发送目标坐标
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 云台控制 -->
    <div class="gimbal-module">
      <h4>📷 云台控制</h4>
      <div class="gimbal-controls">
        <div class="gimbal-pad">
          <div class="pad-row">
            <button 
              @click="gimbalMove('up')" 
              class="btn btn-gimbal"
              :disabled="!isConnected"
            >
              ⬆️ 上
            </button>
          </div>
          <div class="pad-row">
            <button 
              @click="gimbalMove('left')" 
              class="btn btn-gimbal"
              :disabled="!isConnected"
            >
              ⬅️ 左
            </button>
            <button 
              @click="gimbalMove('center')" 
              class="btn btn-gimbal center"
              :disabled="!isConnected"
            >
              🎯 回中
            </button>
            <button 
              @click="gimbalMove('right')" 
              class="btn btn-gimbal"
              :disabled="!isConnected"
            >
              ➡️ 右
            </button>
          </div>
          <div class="pad-row">
            <button 
              @click="gimbalMove('down')" 
              class="btn btn-gimbal"
              :disabled="!isConnected"
            >
              ⬇️ 下
            </button>
          </div>
        </div>
        
        <div class="gimbal-settings">
          <div class="setting-group">
            <label>云台速度:</label>
            <input 
              type="range" 
              v-model.number="gimbalSpeed" 
              min="1" 
              max="10"
              class="speed-slider"
              :disabled="!isConnected"
            >
            <span>{{ gimbalSpeed }}</span>
          </div>
          <div class="setting-group">
            <label>姿态修正:</label>
            <button 
              @click="toggleAttitudeCorrection" 
              class="btn btn-sm"
              :class="attitudeCorrection ? 'btn-success' : 'btn-secondary'"
              :disabled="!isConnected"
            >
              {{ attitudeCorrection ? '✅ 已启用' : '❌ 已禁用' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 目标跟踪 -->
    <div class="tracking-module">
      <h4>🎯 目标跟踪设置</h4>
      <div class="tracking-controls">
        <div class="tracking-modes">
          <div 
            v-for="mode in trackingModes" 
            :key="mode.id"
            class="mode-option"
            :class="{ active: selectedTrackingMode === mode.id }"
            @click="selectTrackingMode(mode.id)"
          >
            <div class="mode-icon">{{ mode.icon }}</div>
            <div class="mode-info">
              <div class="mode-name">{{ mode.name }}</div>
              <div class="mode-desc">{{ mode.description }}</div>
            </div>
          </div>
        </div>
        
        <div class="tracking-actions">
          <button 
            @click="startTracking" 
            class="btn btn-success"
            :disabled="!isConnected || !selectedTrackingMode"
          >
            🚀 开始跟踪
          </button>
          <button 
            @click="stopTracking" 
            class="btn btn-warning"
            :disabled="!isConnected"
          >
            ⏹️ 停止跟踪
          </button>
          <button 
            @click="resetTracking" 
            class="btn btn-info"
            :disabled="!isConnected"
          >
            🔄 重置跟踪器
          </button>
        </div>
      </div>
    </div>

    <!-- 视觉参数设置 -->
    <div class="vision-params-module">
      <h4>⚙️ 视觉参数设置</h4>
      <div class="vision-params">
        <div class="param-grid">
          <div class="param-item">
            <label>检测置信度:</label>
            <input 
              type="range" 
              v-model.number="visionParams.confidence" 
              min="0.1" 
              max="1.0" 
              step="0.1"
              class="param-slider"
              :disabled="!isConnected"
            >
            <span>{{ visionParams.confidence.toFixed(1) }}</span>
          </div>
          
          <div class="param-item">
            <label>跟踪阈值:</label>
            <input 
              type="range" 
              v-model.number="visionParams.trackingThreshold" 
              min="0.1" 
              max="1.0" 
              step="0.1"
              class="param-slider"
              :disabled="!isConnected"
            >
            <span>{{ visionParams.trackingThreshold.toFixed(1) }}</span>
          </div>
          
          <div class="param-item">
            <label>最大目标数:</label>
            <input 
              type="number" 
              v-model.number="visionParams.maxTargets" 
              min="1" 
              max="10"
              class="param-input"
              :disabled="!isConnected"
            >
          </div>
          
          <div class="param-item">
            <label>检测间隔(ms):</label>
            <input 
              type="number" 
              v-model.number="visionParams.detectionInterval" 
              min="10" 
              max="1000"
              class="param-input"
              :disabled="!isConnected"
            >
          </div>
        </div>
        
        <button 
          @click="applyVisionParams" 
          class="btn btn-primary"
          :disabled="!isConnected"
        >
          💾 应用视觉参数
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpirecvControl',
  props: {
    isConnected: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      mouseControl: -1,
      visionTarget: {
        x: 0,
        y: 0
      },
      gimbalSpeed: 5,
      attitudeCorrection: true,
      selectedTrackingMode: null,
      visionParams: {
        confidence: 0.5,
        trackingThreshold: 0.7,
        maxTargets: 5,
        detectionInterval: 100
      },
      trackingModes: [
        {
          id: 'color',
          icon: '🎨',
          name: '颜色跟踪',
          description: '基于颜色特征的目标跟踪'
        },
        {
          id: 'template',
          icon: '📐',
          name: '模板匹配',
          description: '使用模板图像进行目标匹配'
        },
        {
          id: 'deeplearning',
          icon: '🧠',
          name: '深度学习',
          description: '基于神经网络的目标检测'
        },
        {
          id: 'opticalflow',
          icon: '🌊',
          name: '光流跟踪',
          description: '基于运动光流的目标跟踪'
        }
      ]
    };
  },
  methods: {
    sendMouseControl(button) {
      this.mouseControl = button;
      // 发送鼠标控制命令到 /uav1/spirecv/control
      this.$emit('send-vision-control', {
        mouse: button,
        x: this.visionTarget.x,
        y: this.visionTarget.y
      });
    },

    sendVisionTarget() {
      // 发送视觉目标坐标
      this.$emit('send-vision-target', {
        x: this.visionTarget.x,
        y: this.visionTarget.y
      });
    },

    gimbalMove(direction) {
      const movements = {
        'up': { pitch: -this.gimbalSpeed },
        'down': { pitch: this.gimbalSpeed },
        'left': { yaw: -this.gimbalSpeed },
        'right': { yaw: this.gimbalSpeed },
        'center': { pitch: 0, yaw: 0 }
      };
      
      this.$emit('send-gimbal-control', movements[direction] || {});
    },

    toggleAttitudeCorrection() {
      this.attitudeCorrection = !this.attitudeCorrection;
      this.$emit('send-attitude-correction', this.attitudeCorrection);
    },

    selectTrackingMode(modeId) {
      this.selectedTrackingMode = modeId;
    },

    startTracking() {
      if (!this.selectedTrackingMode) {
        alert('请先选择跟踪模式！');
        return;
      }
      
      this.$emit('start-tracking', {
        mode: this.selectedTrackingMode,
        params: this.visionParams
      });
    },

    stopTracking() {
      this.$emit('stop-tracking');
    },

    resetTracking() {
      this.$emit('reset-tracking');
    },

    applyVisionParams() {
      this.$emit('apply-vision-params', this.visionParams);
    }
  },
  emits: [
    'send-vision-control',
    'send-vision-target',
    'send-gimbal-control',
    'send-attitude-correction',
    'start-tracking',
    'stop-tracking',
    'reset-tracking',
    'apply-vision-params'
  ]
};
</script>

<style scoped>
.vision-module, .gimbal-module, .tracking-module, .vision-params-module {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vision-module h4, .gimbal-module h4, .tracking-module h4, .vision-params-module h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vision-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.control-group label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 100px;
}

.coordinate-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.gimbal-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.gimbal-pad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.pad-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-gimbal {
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.btn-gimbal.center {
  width: 100px;
}

.gimbal-settings {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.setting-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-group label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 80px;
}

.speed-slider {
  flex: 1;
}

.tracking-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 15px;
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.mode-option:hover {
  border-color: #409EFF;
  background: #f0f7ff;
}

.mode-option.active {
  border-color: #409EFF;
  background: #e6f7ff;
}

.mode-icon {
  font-size: 24px;
}

.mode-info {
  flex: 1;
}

.mode-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.mode-desc {
  font-size: 12px;
  color: #7f8c8d;
}

.tracking-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vision-params {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.param-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.param-item label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 120px;
  font-size: 14px;
}

.param-slider {
  flex: 1;
}

.param-input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-vision {
  background: #8e44ad;
  color: white;
}

.btn-vision.active {
  background: #6c3483;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.btn-primary { background: #409EFF; color: white; }
.btn-success { background: #52c41a; color: white; }
.btn-warning { background: #faad14; color: white; }
.btn-info { background: #13c2c2; color: white; }
.btn-secondary { background: #f0f0f0; color: #666; }

@media (max-width: 768px) {
  .gimbal-controls {
    grid-template-columns: 1fr;
  }
  
  .control-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .coordinate-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  
  .tracking-modes {
    grid-template-columns: 1fr;
  }
  
  .param-grid {
    grid-template-columns: 1fr;
  }
}
</style>